<template>
	<view class="orde">
		<view class="express-bar"></view>
		<uni-list  class="addressGroup">
			<uni-list-item @click="openAddressList" 
			 :show-extra-icon="true" :extra-icon="{ color: '#919191', size: '20', type: 'map-pin-ellipse' }"
			 :title="default_name + ' ' + default_tel" :note="default_address_details" v-if="address_list.length > 0"></uni-list-item>
			<uni-list-item
				isLink
				icon="location-o"
				@click="openAddressList"
				style="padding-top: 10rpx;padding-bottom: 10rpx; margin-top: 10rpx;"
				title="您还没有收货地址，点击创建"
				:note="default_address_details"
				v-if="address_list.length === 0"
			></uni-list-item>
		</uni-list>
		<view class="express-bar"></view>
		
		

		<view class="order-form-item mt20">
			<my-card
				v-for="item in carListConfirmLists"
				v-if="carListConfirmLists.length > 0"
				class="goods"
				:idid="item.id"
				:quantity="item.quantity"
				:price="item.price"
				desc=""
				:title="item.title"
				:thumb="item.image"
			/>
		</view>

		<view class="remark"><input v-model="remark" placeholder="留言：选填，可填写您的要求" /></view>

		<view style="margin-bottom: 100px;">
			
			<uni-list>
				<uni-list-item title="商品总金额">
					<template v-slot:right="">{{'￥' + (total_price / 1).toFixed(2)}}</template>
				</uni-list-item>
				<uni-list-item title="运费">
					<template v-slot:right="">￥0.00</template>
				</uni-list-item>
				<uni-list-item title="享受折扣" v-if="discount < 10" >
					<template v-slot:right="">{{discount}}折</template>
				</uni-list-item>
			</uni-list>			
			 
		</view>

		<view class="order-form-footer">
			<view class="left">
				<view>
				需付款：
				<text class="price">￥{{ (total_price_final / 1).toFixed(2) }}</text>
				</view>
			</view>
			<view class="right"><button type="primary" @click.native="toPay" class="orderBtn">提交订单</button></view>
		</view>

		<uni-popup ref="popup" type="bottom">
			<button type="info" block @click="addressAdd" class="addressAdd">+添加收货地址</button>

			<uni-list v-for="item in address_list" :key="item.id" >
				<uni-list-item 
				:show-extra-icon="true" :extra-icon="{ color: '#919191', size: '20', type: 'map-pin-ellipse' }"
				:title="item.name + ' ' + item.phone" :note="item.address" @click="setCurrentAddress(item.id)"></uni-list-item>
			</uni-list>
		</uni-popup>
	</view>
</template>

<script>
import COMMON from '../../common.js';

import uniPopup from '@/components/uni-popup/uni-popup.vue';
import uniList from '@/components/uni-list/uni-list.vue';
import uniListItem from '@/components/uni-list-item/uni-list-item.vue';

import myCard from '@/components/my-card/my-card.vue';

import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';

export default {
	components: { uniPopup, uniList, uniListItem, myCard },
	data() {
		return {
			addressPlaceHolder: '请选择地址',
			default_address: 0,
			address_list: [],
			remark: '',
			show: true,
			radio: '1',
			default_name: '',
			default_tel: '',
			default_address_details: '',
			postage: 6,
			carListConfirmLists: [],
			total_price: 0,
			total_price_final: 0,
			discount: ''
		};
	},
	onShow() {
		COMMON.isLogin();
		
		
		
	},
	onLoad() {
		//
		this.loadData();		 
		
		let that = this
		
		this.$EventBus.$on('address_add_success', function(val) {
		  if (val === 'ok') {
			  that.loadData();
			  that.$refs.popup.close()
		  }
		});
	},
	computed: {
		...mapState(['cart', 'allSelsect'])
	},
	methods: {
		
		
		...mapMutations(['CLEAR_SELECTED']),
		
		addressAdd(){
			
			uni.navigateTo({
				url:'../mine/addressAdd?redirect=../cart/checkout'
			})			
		},
		
		openAddressList(){			
			this.$refs.popup.open()
		},
		getCheckedGoods() {
			let goodsCheck = [];
			this.cart.forEach(item => {
				if (item.selected == true) {
					goodsCheck.push({
						id: item.productId,
						title: item.title,
						price: item.price,
						image: item.image,
						quantity: item.quantity
					});
				}
			});
			return goodsCheck;
		},

		// 获取地址列表 和 确认产品列表
		loadData() {
			this.$http.post('/shop.cart/checkout', { cart_goods: this.getCheckedGoods() }).then(res => {
				this.address_list = res.data.data.address_lists;
				this.carListConfirmLists = res.data.data.cart_goods_confirm_lists;
				this.total_price = res.data.data.total_price;
				this.total_price_final = res.data.data.total_price_final;
				this.discount = res.data.data.discount;

				if (this.address_list.length > 0) {
					this.default_address = this.address_list[0].id;
					this.default_name = this.address_list[0].name;
					this.default_tel = this.address_list[0].phone;
					this.default_address_details = this.address_list[0].address;
				}
				for (var index in this.address_list) {
					if (this.address_list[index].is_default === true) {
						this.default_address = this.address_list[index].id;
						this.default_name = this.address_list[index].name;
						this.default_tel = this.address_list[index].phone;
						this.default_address_details = this.address_list[index].address;
					}
				}
			});
		},

		// 选择不当前订单的收货地址
		setCurrentAddress(address_id) {
			
			// 关闭弹窗
			this.$refs.popup.close()
			
			this.default_address = address_id;
			for (var index in this.address_list) {
				if (this.address_list[index].id === address_id) {
					this.default_name = this.address_list[index].name;
					this.default_address_details = this.address_list[index].address;
				}
			}
		},

		// 生成订单
		toPay() {
			if (this.default_address > 0) {
				// 生成一个新订单
				this.$http
					.post('/shop.order/create', {
						cart_confirm_items: this.carListConfirmLists,
						address_id: this.default_address,
						remark: this.remark
					})
					.then(res => {
						
						console.log(res)
						
						if (res.data.code == 0) {
							// this.$store.state.carList = [];
							// this.$store.state.cartCounter = 0;
							// 清空购物车中选择的商品
							this.$store.commit('CLEAR_SELECTED')
							
							uni.navigateTo({
								url: '../order/success?id=' + res.data.data
							})

							 
							
						}else{
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					});
			} else {
				
				uni.showModal({
				    title: '提示',
				    content: '请先添加收货地址',
					showCancel: false
				    
				});
				
				 
			}
		}
	}
};
</script>

<style lang="scss">

.remark {
	margin-bottom: 10px;
	background-color: white;
	padding: 20rpx;
	font-size: 24rpx;
}

.addressAdd {
	background-color: $colorPrimary;
	border: 0;
	color: white;
	font-size: 30rpx;
}

.express-bar {
	height: 10rpx;
	background: url('~@/static/express.png') left center repeat-x #ffffff;
}
.order-form-item {
	padding: 10px;
	background-color: #fff;
	margin-bottom: 20rpx;
} 
.order-form-footer {
	 
	 display: flex;
	 

	position: fixed;
	width: 100%;
	bottom: 0;
	border-top: 1px solid #eee;
	left: 0;	 

	background-color: #fff;
	.left {
		flex: 1;
		display: flex;
		 align-items: center;
		 padding-left: 20rpx;
		.price {
			color: $colorAccent;
			font-weight: 600;
		}
	}

	.right {
 		width:240rpx;
		.orderBtn {
			border: none;
			border-radius: 0;
			background-color: $colorPrimary;
			padding-left: 30rpx;
			padding-right: 30rpx;
			color: white;
			height: 100%;
			width: 100%;
		}
	}
}
</style>
